<template>
  <child>
    <!-- // 匿名插槽 -->
    <span>我是默认插槽</span>
    <!-- // 具名插槽 -->
    <template #title>
      <h3>我是具名插槽</h3>
      <h3>我是具名插槽</h3>
    </template>
    <!-- // 作用域插槽 -->
    <template #footer="{ scope }">
      <footer>作用域插槽——姓名：{{ scope.name }}，年龄{{ scope.age }}</footer>
    </template>
  </child>
</template>

<script lang="ts" setup>
// 引入子组件
import child from './children-component.vue'
</script>
<style scoped>
.my-box {
  display: flex;
}
/* 支持CSS变量注入v-bind(color) */
</style>
